<template>
	<view class="outpatientRec">
		<SwitchPatient :fun="swit"></SwitchPatient>
		<view class="ItemsToBePaid">
			<view class="recharChoose">
				<text>近一年</text>
				<uni-datetime-picker v-model="Data.range" type="daterange" @maskClick="maskClick">
					<text class="range">
						选择时间
						<text class="iconfont icon-xiangxia1"></text>
					</text>
				</uni-datetime-picker>
			</view>
			<view v-if="Data.list?Data.list.length:0">
				<view class="ItemsToBePaidList" v-for="v in Data.list" :key="v.registerId" @click="toPaymentDetail(v)">
					<view class="ItemsToBePaidItem">
						<view>
							<text>{{v.expenseType}}</text>
							<text>{{v.departmentName}} {{v.doctorName}}</text>
							<text>{{v.payTime}}</text>
						</view>
						<view>
							<text>¥{{v.orderTotal}}.00</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ItemsToBePaidList" v-else style="display: flex;justify-content: center;">
				<text>暂无待缴费项目</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import SwitchPatient from '@/components/SwitchPatient.vue'
	import {
		reactive,
		onMounted,
		watch
	} from 'vue';
	import {
		selfpayPaylists
	} from '@/api/TopUpService.js';
	import {
		useTopStore
	} from '@/store/TopUpService.js';
	const topStore = useTopStore();
	const Data = reactive({
		list: [],
		range: [],
		id: 0
	})
	watch(
		() => Data.range,
		() => {
			// console.log(Data.range)
			selfpayPaylistsFu(Data.id, Data.range[0], Data.range[1]);
		}
	)
	const toPaymentDetail = (v) => {
		uni.navigateTo({
			url: `/pages/selfPayment/paymentDetail/paymentDetail?orderId=${v.orderId}`
		})
	}
	const swit = (v) => {
		selfpayPaylistsFu(v.id, Data.range[0] || toDate(new Date().setFullYear(new Date().getFullYear() - 1)), Data
			.range[1] || toDate(new Date()));
		Data.id = v.id;
	}
	const selfpayPaylistsFu = (id, startTime, endTime) => {
		selfpayPaylists({
			id,
			startTime,
			endTime
		}).then(({
			data
		}) => {
			if (data.msg == 'success') {
				Data.list = data.data;
				Data.list.forEach(v => {
					switch (v.expenseType) {
						case 0:
							v.expenseType = '门诊费';
							break;
						case 1:
							v.expenseType = '西药费';
							break;
						case 2:
							v.expenseType = '中药费';
							break;
					}
				})

			}
		}).catch((err) => {
			console.log(err)
		})
	}
	const toDate = t => new Date(t).toLocaleString("zh-CN", {
		dateStyle: 'short'
	}).split('/').join('-')

	onMounted(() => {
		// setTimeout(() => {
		// 	selfpayPaylistsFu(Data.id, toDate(new Date().setFullYear(new Date().getFullYear() - 1)),
		// 		toDate(new Date()));
		// }, 500)
	})
</script>

<style lang="less" scoped>
	.outpatientRec {
		width: 750rpx;
		color: #5d5d5d;
		background-color: #fdfeff;
		height: 100vh;

		.recharChoose {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-bottom: 40rpx;

			&>text {
				font-size: 28rpx;
				background-color: #006eff;
				margin-right: 36rpx;
				border-radius: 50rpx;
				padding: 12rpx 28rpx;
				color: #fff;
				font-weight: 500;
			}

			.range {
				margin-right: 36rpx;
				border-radius: 50rpx;
				padding: 12rpx 28rpx;
				color: #fff;
				font-weight: 500;
				font-size: 26rpx;
				background-color: #e4f0ff;
				color: #006eff;

				.iconfont {
					font-size: 20rpx;
					margin: 0 0 0 10rpx;
				}
			}
		}

		.ItemsToBePaid {
			width: 680rpx;
			margin: 0 auto;

			&>text {
				font-weight: 600;
				font-size: 40rpx;
			}

			.ItemsToBePaidList {
				width: 100%;

				&>text {
					margin: 50rpx 0;
					font-size: 35rpx;
					font-weight: 600;
					color: #aaaaaa;
				}

				.ItemsToBePaidItem {
					width: 100%;
					height: 200rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1px solid #f2f2f2;
					padding: 0 40rpx;
					box-sizing: border-box;
					margin: 25rpx 0;

					view {
						display: flex;
						flex-direction: column;

						&:first-child {
							font-size: 28rpx;
							color: #aaaaaa;

							text:first-child {
								font-size: 32rpx;
								font-weight: 600;
								color: #5d5d5d;
							}

							text {
								margin: 6rpx 0;
							}
						}

						&:last-child {
							text:first-child {
								font-size: 30rpx;
								color: #f46060;
								font-weight: 600;
								text-align: right;
							}

							view {
								width: 145rpx;
								height: 65rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 32rpx;
								background-color: #006eff;
								border-radius: 10rpx;
								color: #fff;
								font-weight: 600;
								margin-top: 35rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
